<template>
	<view class="con">
		<view class="nav">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<image src="../../static/index/search.png" mode=""></image>
				<input class="input-text" type="text" placeholder="电子药盒" v-model="text" />
				<view class="search" @click="search">搜索</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-box">
			<swiper indicator-active-color="#EC5F2A" :autoplay="true" :interval="3000" indicator-color="#fff"
				:indicator-dots="true" :circular="true">
				<swiper-item v-for="(item,index) in bannerlist" :key="index">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 功能区 -->
		<view class="action-box">
			<view class="item" @click="tofb">
				<image src="../../static/indexicon/i-1.png" mode=""></image>
				<view class="item-text">发布任务</view>
			</view>
			<view class="item" @click="navTo('/pages/index/pension/pension','1')">
				<image src="../../static/indexicon/i-2.png" mode=""></image>
				<view class="item-text">养老</view>
			</view>
			<view class="item" @click="follow">
				<image src="../../static/indexicon/i-3.png" mode=""></image>
				<view class="item-text">医疗</view>
			</view>
			<view class="item" @click="navTo('/pages/market/market','1')">
				<image src="../../static/indexicon/i-4.png" mode=""></image>
				<view class="item-text">市场</view>
			</view>
			<view class="item" @click="follow">
				<image src="../../static/indexicon/i-5.png" mode=""></image>
				<view class="item-text">红包</view>
			</view>
			<view class="item" @click="navTo('/pages/index/povertyAlleviation/enterprise','0')">
				<image src="../../static/indexicon/i-6.png" mode=""></image>
				<view class="item-text">扶贫企业</view>
			</view>
			<view class="item" @click="navTo('/pages/activity/activitylist','0')">
				<image src="../../static/indexicon/i-7.png" mode=""></image>
				<view class="item-text">活动</view>
			</view>
			<view class="item" @click="navTo('/pages/index/notice','0')">
				<image src="../../static/indexicon/i-8.png" mode=""></image>
				<view class="item-text">通知信息</view>
			</view>
			<view class="item" @click="navTo('/pages/index/notice/noticeList','0')">
				<image src="../../static/indexicon/i-9.png" mode=""></image>
				<view class="item-text">资讯</view>
			</view>
			<view class="item" @click="navTo('/pages/index/celebrity/celebrityList','0')">
				<image src="../../static/indexicon/i-10.png" mode=""></image>
				<view class="item-text">名人展示</view>
			</view>
		</view>
		<!-- 优秀义工 -->
		<view class="volunteer-box" @click="navTo('/pages/index/volunteer','0')">
			<!-- 标题区域及更多 -->
			<view class="title">
				<view class="title-left">优秀义工</view>
				<view class="title-right">
					查看更多
					<u-icon name="arrow-right" color="#F09238" size="20"></u-icon>
				</view>
			</view>
			<!-- 图片展示 -->
			<view class="photo">
				<view class="photo-item" v-for="(item,index) in yglist" :key="index">
					<image :src="item.avatarUrl" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 最美社区 -->
		<view class="volunteer-box" @click="navTo('/pages/index/community','0')">
			<!-- 标题区域及更多 -->
			<view class="title">
				<view class="title-left">最美社区</view>
				<view class="title-right">
					查看更多
					<u-icon name="arrow-right" color="#F09238" size="20"></u-icon>
				</view>
			</view>
			<!-- 图片展示 -->
			<view class="photo">
				<view class="photo-item" v-for="item in sqlist">
					<image :src="item.communityImage" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 名人展示 -->
		<view class="volunteer-box" @click="navTo('/pages/index/celebrity/celebrityList','0')">
			<!-- 标题区域及更多 -->
			<view class="title">
				<view class="title-left">名人展示</view>
				<view class="title-right">
					查看更多
					<u-icon name="arrow-right" color="#F09238" size="20"></u-icon>
				</view>
			</view>
			<!-- 图片展示 -->
			<view class="photo">
				<view class="photo-item" v-for="(item,index) in mrlist" :key="index">
					<image :src="item.headUrl" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 资讯 -->
		<view class="information" @click="navTo('/pages/index/notice/noticeList','0')">
			<!-- 标题区域及更多 -->
			<view class="title">
				<view class="title-left">资讯</view>
				<view class="title-right">
					查看更多
					<u-icon name="arrow-right" color="#F09238" size="20"></u-icon>
				</view>
			</view>
			<!-- 图片展示 -->
			<view class="photo">
				<view class="photo-item" v-for="(item,index) in newslist" :key="index">
					<image :src="item.noticeImage" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 文字信息 -->
			<!-- <view class="information-text">为丰富社区老年人的文化生活，提高居民团结力，凝聚力凝聚。</view> -->
		</view>
		<image @click="help" class="help" src="../../static/index/help.png" mode="" v-if="flag"></image>
		<u-mask :show="upShow" @click="upShow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image src="../../static/index/appup.png" mode="aspectFill" class="upimg"></image>
					<view class="uptitle">
						<view class="titleup" v-for="(item,index) in upTitleList">{{index+1}}:{{item}}</view>
						<view class="upbtn" @click="down()">立即升级</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {
		getbanner,
		getyg,
		getmszs,
		getnews,
		getsq,
		onekeyHelp,
		appup
	} from "../../api/index.js"
	import {
		genTestUserSig
	} from '../../static/utils/GenerateTestUserSig'
	export default {
		components: {},
		data() {
			return {
				bannerlist: [],
				yglist: [],
				mrlist: [],
				newslist: [],
				text: "",
				jwd: null,
				sqlist: [],
				flag: false,
				upShow: false,
				upappurl: "",
				upTitleList: []
			};
		},
		// 
		onLoad(e) {
			if (!uni.getStorageSync('isLook')) {
				uni.navigateTo({
					url: "../lead/lead"
				})
			}
			this.getbanner()
			this.getxg()
			this.getmrzs()
			this.getnews()
			this.getsq()
			// #ifdef APP-PLUS
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.jwd = res.latitude + "," + res.longitude
					console.log(res)
				},
			})
			this.appUp()
			// #endif
		},
		onShow() {
			if (uni.getStorageSync("userInfo") && uni.getStorageSync("user") && uni.getStorageSync("user").userType == 1) {
				this.flag = true
			}
			if (uni.getStorageSync('userInfo')) {
				this.imlogin()
			}
		},
		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			imlogin() {
				let id = uni.getStorageSync('userInfo').userId
				console.log(id)
				this.tim.login({
					userID: id.toString(),
					userSig: genTestUserSig(id.toString()).userSig
				}).then(res => {
					console.log("res", res)
					this.ready()
				}).catch((err) => {
					console.log('err', err)
				})
			},
			ready() {
				let onSdkReady = (e) => {
					console.log("ready", e)
					// 设置个人资料，这个实际开发中应该用户注册后就应该设置
					if (uni.getStorageSync("userInfo") && uni.getStorageSync("user")) {
						this.setInfo()
					}
				};
				this.tim.on(this.TIM.EVENT.SDK_READY, onSdkReady);
			},
			setInfo() {
				let name = uni.getStorageSync("user").username
				if (name == null) {
					name = "昵称未设置"
				}
				let avatar = uni.getStorageSync("user").avatarUrl
				// 修改个人标配资料
				let promise = this.tim.updateMyProfile({
					nick: name,
					avatar: avatar,
					gender: this.TIM.TYPES.GENDER_MALE,
					selfSignature: '我的个性签名',
					allowType: this.TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
				});
				promise.then((imResponse) => {
					console.log('更新资料成功', imResponse.data); // 更新资料成功
				}).catch(function(imError) {
					console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
				});
			},
			async appUp() {
				let res = await this.get(appup)
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					console.log("系统信息", widgetInfo)
					// 版本名称
					let name = widgetInfo.version
					// 版本号
					let code = widgetInfo.versionCode
					this.upTitleList = res.data.updateContent.split('&')
					console.log("版本名称", name)
					console.log("版本号", code)
					//先比较版本号，再比较版本名称
					if (res.data.versionNumber != code) {
						console.log("版本号不同")
						// 执行整包下载程序
						this.upShow = true
						this.upappurl = res.data.packageAddress
					} else {
						if (res.data.versionName != name) {
							console.log("版本名称不同")
							this.upShow = true
							// 下载资源包
							this.upappurl = res.data.resourcePackageAddress
						}
					}
				});

				// #endif
			},
			// 下载程序
			down() {
				this.upShow = false
				const downloadTask = uni.downloadFile({ //执行下载
					url: this.upappurl, //下载地址
					success: r => { //下载成功
						console.log("ok", r)
						if (r.statusCode == 200) {
							plus.runtime.install(r.tempFilePath, {
								force: false
							},()=>{
								console.log('install');
								this.showMd("更新重启生效，现在重启",()=>{
									plus.runtime.restart();
								})
								
							}, function(e) {
								console.error('install fail...');
							});
						}
					},
					fail: r => {
						console.log("ERR", r)
					}
				})
				var showLoading = plus.nativeUI.showWaiting("正在更新下载")
				downloadTask.onProgressUpdate((res) => {
					showLoading.setTitle("正在更新下载" + res.progress + "%  ");
					if (res.progress == 100) {
						plus.nativeUI.closeWaiting()
					}
				});
			},
			follow() {
				this.msg("敬请期待", "none")
			},
			// 一键求助
			help() {
				if (this.jwd == null) {
					uni.getLocation({
						type: 'wgs84',
						geocode: true,
						success: (res) => {
							this.jwd = res.latitude + "," + res.longitude
							this.showMd("是否需要帮助", () => {
								this.post(onekeyHelp, {
									latitudeAndLongitude: this.jwd
								}).then(res => {
									console.log(res)
								})
							})
						},
						fail: () => {
							this.msg("位置获取失败，无法发送救援", "none")
						}
					})
				} else {
					this.showMd("是否需要帮助", () => {
						this.post(onekeyHelp, {
							latitudeAndLongitude: this.jwd
						}).then(res => {
							this.msg("帮助发送成功")
						})
					})
				}

			},
			// 统一跳转
			navTo(url, type) {
				// type=0不要登录 1 需要登录
				if (type == 0) {
					uni.navigateTo({
						url: url
					})
				} else {
					if (this.Md.islogin()) {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			tofb() {
				if (this.Md.islogin()) {
					if (uni.getStorageSync("user").userType == 1) {
						uni.navigateTo({
							url: "/pages/task/addtask"
						})
					} else {
						this.msg("老人才可发布任务", "none")
					}
				}
			},
			// 获取轮播图
			async getbanner() {
				let res = await this.get(getbanner)
				this.bannerlist = res.data
			},
			// 获取最美义工
			async getxg() {
				let res = await this.get(getyg, {
					pageNum: 1,
					pageSize: 3
				})
				this.yglist = res.data

			},
			// 获取悯人展示
			async getmrzs() {
				let res = await this.get(getmszs, {
					pageNum: 1,
					pageSize: 3
				})
				this.mrlist = res.data
			},
			// 获取新闻展示
			async getnews() {
				let res = await this.get(getnews, {
					pageNum: 1,
					pageSize: 3,
					type: 3
				})
				this.newslist = res.data
			},
			// 最美社区
			async getsq() {
				let res = await this.get(getsq)
				if (res.data.length > 3) {
					for (let i = 0; i < 3; i++) {
						this.sqlist.push(res.data[i])
					}
				} else {
					this.sqlist = res.data
				}
			},
			search() {
				if (this.text.trim() != '') {
					uni.navigateTo({
						url: "/pages/product/productlist?text=" + this.text
					})
				} else {
					this.msg("未输入关键字", "none")
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.titleup {
		line-height: 60rpx;
		font-size: 30rpx;
	}


	.upbtn {
		width: 560rpx;
		height: 70rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 8px;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	.uptitle {
		background-color: #FFFFFF;
		padding: 30rpx;
		width: rpx;
	}

	.upimg {
		width: 620rpx;
		height: 477rpx;
		display: block;
		position: relative;
		top: 4rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 750rpx;
	}

	.search {
		position: absolute;
		right: 20rpx;
		color: #F09238;
	}

	.con {
		padding-top: calc(60rpx + var(--status-bar-height));
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 750px;
		background-color: #FFFFFF;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.input-box {
		width: 630rpx;
		height: 58rpx;
		border: 1px solid #F09238;
		border-radius: 62rpx;
		margin-left: 60rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 20rpx;
		}
	}

	.banner-box {
		width: 690rpx;
		height: 420rpx;
		margin: 45rpx auto 0;
		border-radius: 10rpx;
		overflow: hidden;

	}

	.banner-box>swiper {
		width: 690rpx;
		height: 420rpx;
	}

	swiper-item {
		width: 100vw;
		height: 420rpx;
	}

	swiper-item>image {
		width: 690rpx;
		height: 420rpx;
		border-radius: 10rpx;
	}

	.action-box {
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		margin: 50rpx 30rpx 0;
	}

	.item {
		text-align: center;
		width: 20%;
		height: 180rpx;
	}

	.item>image {
		width: 92rpx;
		height: 92rpx;
	}

	.item-text {
		font-size: 30rpx;
		line-height: 30rpx;
		color: #333333;
		margin-top: 20rpx;
	}

	.volunteer-box {
		width: 690rpx;
		height: 430rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		// margin: 30rpx auto;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dfdfdf;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.title-left {
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}

		.title-right {
			font-size: 28rpx;
			font-weight: 100;
			color: #F09238;
		}
	}

	.photo {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 30rpx;
		box-sizing: border-box;

		.photo-item {
			width: 33%;
			display: flex;
			justify-content: center;

			image {
				width: 206rpx;
				height: 270rpx;
				border-radius: 20rpx;
			}
		}
	}

	.information {
		width: 690rpx;
		height: 430rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.information-text {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.help {
		width: 130rpx;
		height: 130rpx;
		position: fixed;
		bottom: 10rpx;
		left: 310rpx;
		/* #ifdef H5 */
		bottom: 100rpx
			/* #endif */
	}
</style>
